<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/js/element-ui/lib/index.js"></script>
</head>
<body>
<div id="main">
    <el-row>
        <el-button type="primary" @click="add">添加</el-button>
    </el-row>
    <el-table
            :default-sort="{prop: 'id', order: 'descending'}"
            ref="multipleTable"
            :data="articles"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="id"
                label="文章编号"
                width="200">
        </el-table-column>
        <el-table-column
                label="发布时间"
                width="200">
            <template slot-scope="scope">{{ scope.row.createtime }}</template>
        </el-table-column>
        <el-table-column
                prop="user.name"
                label="作者"
                width="200">
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题"
                width="200">
        </el-table-column>
        <el-table-column
                prop="content"
                label="文章内容"
                show-overflow-tooltip>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--
        分页组件,关键参数：
            @size-change 页大小发生变化时候触发
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--添加或修改文章-->
    <el-dialog title="文章管理" :visible.sync="dialogFormVisible">
        <el-form :model="article">
            <el-form-item label="文章标题" :label-width="formLabelWidth">
                <el-input v-model="article.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="文章作者" :label-width="formLabelWidth">
                <el-select v-model="article.user.id" placeholder="请选择">
                    <el-option v-for="u in users" :key="u.id" :label="u.name" :value="u.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发布时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="article.createtime"
                        type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="发布内容" :label-width="formLabelWidth">
                <el-input v-model="article.content" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script>
    new Vue({
        el: "#main",
        data: {
            multipleSelection: [],
            articles: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            article: {
                title: '',
                createtime: '',
                content: '',
                user: { // 注意：不能省略；否则下拉框找不到id
                    id: ''
                }
            },
            users: []
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            loadAll() {
                // 不分页
                //axios.get('/article').then(resp=>{
                //    this.articles = resp.data;
                //})

                // 分页: get请求url后追加参数，需要使用params关键字指定; 或用?拼接
                axios.get('/article/page', {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                }).then(resp => {
                    let pageInfo = resp.data;
                    this.total = pageInfo.total;
                    this.articles = pageInfo.list;
                })

            },
            handleEdit(index, row) {
                let newRowJson = JSON.parse(JSON.stringify(row));
                this.article = newRowJson;
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/article/${row.id}`).then(resp=>{
                        if (resp.data) {
                            this.loadAll();
                        }
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 页大小变化触发
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadAll();
            },
            // 换页触发
            handleCurrentChange(val) {
                this.pageNum = val;
                this.loadAll();
            },
            // 文章作者列表
            userList() {
                axios.get('/user').then(resp => {
                    this.users = resp.data;
                })
            },
            // 保存或修改
            saveOrUpdate() {
                console.log(this.article);
                axios.post('/article', this.article).then(resp => {
                    if (resp.data) {
                        this.loadAll();
                    }
                })
                this.dialogFormVisible = false
            },
            add() {
                //this.article = {};
                this.article.id = ''
                this.article.title = ''
                this.article.createtime = ''
                this.article.content = ''
                this.article.user.id = ''
                this.dialogFormVisible = true
            }
        },
        created() {
            this.loadAll();
            this.userList();
        }
    })
</script>
</body>
</html>















